<template>
	<view>
		<view>项目名称{{reportData.project_name}}，自{{reportData.create_date}}起,活动费用累计到了{{reportData.total_price}}元</view>
		<view>一共有{{reportData.total_people}}个小伙伴参与了这次活动</view>
		<view>{{reportData.max_detail.title}}在活动中，费用最多，高达{{reportData.max_detail.price}}块</view>
		<view>{{reportData.max_payer.payer_desc}}为大家买单最多，一共{{reportData.max_payer.price}}元，看到你是我们的管家婆呢</view>
		<view>在本次项目中什么类型的花费最多，一共多少块</view>
		<view>支出明细
			<zb-table
            :show-header="true"
            :columns="column"
            :data="reportData.detail_list"></zb-table>
		</view>
		<view>
			小结：{{reportData.project_name}}项目，一共费用{{reportData.total_price}}，每人{{reportData.avg_price}}
		</view>
		<view>小组分账
			<zb-table
            :show-header="true" fit
            :columns="groupColumns"
            :data="reportData.group_list"></zb-table>
		</view>
	</view>
</template>

<script lang="ts" setup> 
	import ZbTable from "@/uni_modules/zb-table/components/zb-table/zb-table.vue"
	import {onLoad,onBackPress,onUnload} from "@dcloudio/uni-app"
	import {ref} from "vue"
import { GetProjectReportDataReq } from "../../http/project";

	const projectId=ref(0)

	const reportData=ref({})

	const column=[
		{label:"费用标题",name:"title"},
		{label:"金额",name:"price"},
		{label:"付款人",name:"payer_desc"},
	]

	const groupColumns=[
		{label:"组名(人数)",name:"name",render:(row,column,idx)=>`${row.name}(${row.num})`},
		{label:"支付金额",name:"pay_price"},
		{label:"应付",name:"yf_price"},
		{label:"实际应付",name:"sjyf_price"},
	]
	
	const detailList=ref([])

	onLoad((option)=>{
		console.log(option)
		projectId.value=option.projectId

		getReportData()
	})

	const getReportData=()=>{
		GetProjectReportDataReq({pid:projectId.value}).then(res=>{
			const data=res.data
			reportData.value=data
			detailList.value=data.detail_list
		})
	}

</script>

<style lang="scss" scoped>

</style>
